<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a {
            color: white;
            text-decoration: none;
        }
        body {
            width: 1440px;
            font-family: "苹方-简 常规体";
        }
        section.one {
            background: black;
            border-bottom: 1px dashed white;
            position: relative;
            color: white;
        }
        header {
            width: 100%;
            height: 60px;
        }
        span.title {
            margin-left: 190px;
            height: 60px;
            line-height: 60px;
        }
        ul.head{
            margin-right: 190px;
            position: absolute;
            top: 0;
            right: 0;
            height: 60px;
        }
        ul.head li{
            float: left;
            margin-left: 15px;
        }
        ul.head a{
            display: block;
            line-height: 60px;
        }

        .clearfix:after {
            height: 0;
            line-height: 0;
            display: block;
            content: "";
            clear: both;
            visibility: hidden;
        }
        .clearfix{
            *zoom: 1;
        }

        section.two {
            /* background: url(./img/Banner.png) no-repeat 0px 0px; */
            position: relative;
        }
        section.two span{
            position: absolute;
            width: 46px;
            height: 46px;
            border: 1px dashed white;
            top: 50%;
            margin-top: -24px;
            color: white;
        }
        section.two span.l {
            margin-left: 48px;
        }
        section.two span.r {
            right: 0;
            margin-right: 48px;
        }
        section.two div.lunbo ul.lb {
            height: 660px;
            /*在制作无缝连接轮播图时，这一步比较关键，一定要设置它的宽度非常大足够装下所有图片。然后可以设置定时器，每隔多长时间移动一次图片，实现自动的动态轮播效果*/
            /* width: 1000000px; */
        }
        
        section.two div.lunbo ul.lb li{
            float: left;
        }
      
        section.two div.lunbo ul.cir {
            position: absolute;
            bottom: 70px;
            left: 545px;
            width: 350px;
            height: 3px;
        }
        /*section.two li{
            float: left;
        }*/
        section.two div.lunbo ul.cir li{
            /*height: 3px;
            width: 77px;*/
            margin-right: 10px;        
            /*border-bottom: 3px dashed white;*/
            float: left;
        }
        section.two div.lunbo ul.cir li a{
            display: block;
            height: 3px;
            width: 77px;
            /*margin-right: 10px;        */
            border-bottom: 3px dotted white;
            /*float: left;*/
        }
        section.two button {
            position: absolute;
            bottom: 200px;
            width: 160px;
            height: 48px;
            color: aliceblue;
        }
        section.two button.free {
            left: 190px;
            background: blue;
            border: 1px dotted white;
        }
        section.two button.sear {
            left: 370px;
            background: none;
            border: 1px dashed white;
        }
        section.three,section.four {
            color: #111111;
            text-align: center;
            font-size: 30px;
        }
        section.three h2,
        section.four h2 {
            margin-top: 50px;
        }
        section.three p.title {
            font-size: 14px;
            color: #818181;
            margin-top: 105px;
            margin-bottom: 50px;
        }
        section.three table {
            margin: 0 auto;
            margin-bottom: 50px;
            border-spacing: 20px 20px;
        }
        section.three table td {
            width: 340px;
            height: 150px;
            border: 1px dashed grey;
            /* margin-right: 20px; */
            /* tr  td  设置margin无效 */
        }
        section.four {
            position: relative;
            /* font-family: "苹方-简 常规体"; */
        }
        section.four div.header {
            margin-left: 190px;
            height: 67px;
        }
        section.four div.header span {
            width: 32px;
            height: 32px;
            border: 1px dashed grey;
            position: absolute;
            top: 126px;
        }
        section.four div.header span.l {
            left: 190px;
        }
        section.four div.header span.r {
            right: 190px;
        }
        section.four ul.title {
            position: absolute;
            top: 106px;
            left: 280px;
        }
        section.four ul.title li {
            float: left;
            padding: 20px 17px;

        }
        section.four ul.title li:first-child {
            border-bottom: 3px solid blue;
        }
        section.four ul.title a{
            display: block;
            width: 126px;
            height: 24px;
            color: black;
            font-size: 18px;
        }
        section.four div.img {
            position: absolute;
            top: 18px;
            right: 48px;
            width: 126px;
            height: 162px;
        }
        section.four div.img .content {
            background: #111111;
            padding: 21px 0;
        }
        section.four div.img .content div{
            width: 80px;
            height: 80px;
            margin: 0 auto;
            background: red;
        }
        section.four div.img p {
            color: #fff;
            font-size: 12px;
            background: #212e48;
            padding: 12px 33px 14px 33px;
        }
        section.four div.mid h4 {
            margin-top: 95px;
            text-align: left;
            margin-left: 270px;
            font-size: 24px;
            color: #111111;
        }
        section.four div.mid p {
            font-size: 14px;
            color: #111111;
            width: 900px;
            height: 48px;
            margin-top: 15px;
            text-align: left;
            margin-left: 270px;
        }
        section.four div.mid ul {
            margin-left: 260px;
            margin-top: 40px;
            margin-bottom: 70px;
        }
        section.four div.mid li {
            width: 287px;
            height: 236px;
            float: left;
            margin-right: 30px;
            text-align: center;
        }
        section.four div.mid li h5 {
            font-size: 18px;
            margin-top: 50px;
        }
        section.four div.mid ul p.text {
            width: 227px;
            margin-top: 15px;
            margin-left: 30px;
            color: #818181;
        }
        section.four div.mid li a {
            font-size: 14px;
            color: #245ff0;
        }
        section.five {
            height: 503px;
            background: #121a2a;
            padding-left: 190px;
            padding-right: 190px;
            padding-top: 70px;
        }
        section.five ul.father {
            border-bottom: 1px solid #fafafa;
        }
        section.five ul.father>li {
            float: left;
            margin-right: 108px;
        }
        section.five ul.father>li>h5 {
            font-size: 18px;
            color: #fff;
            /* font-weight: regular; */
        }
        section.five ul.son {
            margin-top: 40px;
            margin-bottom: 69px;
        }
        section.five ul.son>li {
            margin-bottom: 15px;
        }
        section.five ul.son a {
            color: #b1b1b1;
            font-size: 12px;
        }
        section.five ul.father>li.btn {
            position: relative;
        }
        section.five button {
            width: 152px;
            height: 48px;
            color: aliceblue;
            position: absolute;
            top: 64px;
        }
        section.five button.free {
            background: blue;
            border: 1px dotted white;
            left: 0;
        }
        section.five button.sear {
            background: none;
            border: 1px dashed white;
            left: 180px;
        }
        .overstyle {
            border-bottom: 3px dashed red!important;
        }
    </style>
</head>
<body>
    <section class="one">
        <header>
            <span class="title">众易安全</span>
            <ul class="head clearfix">
                <li><a href="###">安全产品</a></li>
                <li><a href="###">解决方案</a></li>
                <li><a href="###">服务支持</a></li>
                <li><a href="###">文档中心</a></li>
            </ul>
        </header>
    </section>
    <section class="two">
        <div class="lunbo" id="lb">
            <span class="l">《</span>
            <ul class="lb">
                <li class="clearfix"><img v-bind:src="img_src" alt=""></li>
                <li><img v-bind:src="img_src1" alt="" width="1440px" height="660px"></li>
                <li><img v-bind:src="img_src2" alt="" width="1440px" height="660px"></li>
                <li><img v-bind:src="img_src3" alt="" width="1440px" height="660px"></li>
            </ul>
            <span class="r">》</span>
            <ul class="cir clearfix">
                <li><a href="###"></a></li>
                <li><a href="###"></a></li>
                <li><a href="###"></a></li>
                <li><a href="###"></a></li>
            </ul>
        </div>
        
        <button class="free">免费试用</button>
        <button class="sear">探索--></button>

    </section>
    <section class="three">
        <div class="top">
            <h2>稳定安全 全球服务的防护监控系统</h2>
            <p class="title">如果发现该供应商违反规则，我们将要求该供应商拿出整改行动计划，我们注重预防和系统性的解决方案。</p>
        </div>
        <div class="table">
            <table>
                <tr>
                    <td><img src="./img/card.png" alt=""></td>
                    <td><img src="" alt=""></td>
                    <td><img src="" alt=""></td>
                </tr>
                <tr>
                    <td><img src="" alt=""></td>
                    <td><img src="" alt=""></td>
                    <td><img src="" alt=""></td>
                </tr>
                <tr>
                    <td><img src="" alt=""></td>
                    <td><img src="" alt=""></td>
                    <td><img src="" alt=""></td>
                </tr>
            </table>
        </div>
    </section>
    <section class="four">
        <div class="top">
            <h2>客户案例</h2>
        </div>
        <div class="header">
            <span class="l">《</span>
            <ul class="title clearfix">
                <li><a href="#">通用技术研究院</a></li>
                <li><a href="#">上海鎏金科技</a></li>
                <li><a href="#">上海科技大学</a></li>
                <li><a href="#">HNB区块链</a></li>
                <li><a href="#">电商公司</a></li>
            </ul>
            <span class="r">》</span>
            <div class="img">
                <div class="content">
                    <div></div>
                </div>
                <p>关注公众号</p>
            </div>
        </div>
        <div class="mid">
            <h4>中国通用技术研究院</h4>
            <p>发哈送红股啊水平哈故哈就开始攻击考虑去海皮org和脾气好九点零分水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪给日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日</p>
            <ul class="clearfix">
                <li><h5>安全挑战</h5><p class="text">研发团队产品部拉是身份问题我前天去法国啦哦噶山豆根</p><a href="#">展开全部</a></li>
                <li><h5>解决方案</h5><p class="text">研发团队产品部拉是身份问题我前天去法国啦哦噶山豆根</p><a href="#">展开全部</a></li>
                <li><h5>客户反馈</h5><p class="text">研发团队产品部拉是身份问题我前天去法国啦哦噶山豆根</p><a href="#">展开全部</a></li>
            </ul>
        </div>
    </section>
    <section class="five">
        <div class="list">
            <ul class="father clearfix">
                <li>
                    <h5>安全产品</h5>
                    <ul class="son">
                        <li><a href="">应用防火墙</a></li>
                        <li><a href="">应用防火墙</a></li>
                        <li><a href="">应用防火墙</a></li>
                        <li><a href="">应用防火墙</a></li>
                        <li><a href="">应用防火墙</a></li>
                    </ul>
                </li>
                <li>
                    <h5>安全产品</h5>
                    <ul class="son">
                        <li><a href="">了解案例</a></li>
                        <li><a href="">了解案例</a></li>
                        <li><a href="">了解案例</a></li>
                        <li><a href="">了解案例</a></li>
                    </ul>
                </li>
                <li>
                    <h5>安全产品</h5>
                    <ul class="son">
                        <li><a href="">公告</a></li>
                        <li><a href="">公告</a></li>
                        <li><a href="">公告</a></li>
                        <li><a href="">公告</a></li>
                        <li><a href="">公告</a></li>
                    </ul>
                </li>
                <li>
                    <h5>安全产品</h5>
                    <ul class="son">
                        <li><a href="">免费套餐</a></li>
                        <li><a href="">免费套餐</a></li>
                        <li><a href="">免费套餐</a></li>
                    </ul>
                </li>
                <li class="btn">
                    <h5>联系我们</h5>
                        <button class="free">免费试用</button>
                        <button class="sear">购买咨询</button>
                </li>
            </ul>
        </div>
    </section>

    <script>
        // 每隔多长时间，轮播图滚动一次；轮播图滚动，相应地a标签也出现动画；点击左/右按钮，轮播图左/右滑动；点击按钮出现动画；
        var lunbo = new Vue({
            el: '#lb',
            data: {
                img_src: './img/Banner.png',
                img_src1: './img/1.jpeg',
                img_src2: './img/2.jpg',
                img_src3: './img/3.jpg',
            },
        })

        var showindex=0;//用showinde来表示数组下标
        var timer;//用来表示定时器
        var timeout;//用来表示延迟定时器

        $(function() {
            // 除了第一张图，其他图片隐藏
            $('ul.lb li').not(":eq(0)").css('display','none'); 

            Timer();//执行计时器函数，实现自动轮播
            
            $('ul.cir a').hover(function() {
                $(this).addClass('overstyle');//切换样式  // 设置小导航条的样式
                // console.log($(this).parent('li').siblings('li').children('a'));
                // $(this).siblings().removeClass('overstyle');错误！！  不同基  访问不到a标签的其他a标签节点  因为其他a标签和当前a标签不是同一个父元素  它们不是亲兄弟 
                $(this).parent('li').siblings('li').children('a').removeClass('overstyle');
                // 悬浮时，图片不滚动了,清除定时器，并且悬浮到哪里，图片就切换到哪里
                clearInterval(timer);
                // console.log($(this).parent().index());
                showindex = $(this).parent().index();//先获取到悬浮的索引号
                // $('ul.lb li').stop().fadeOut(500).eq(showindex).fadeIn(500);
                showImg();
            },function() {
                $(this).removeClass('overstyle');
                // 当鼠标离开时，又继续自动轮播
                TimeOut();
            })

            // 当点击左按钮时，图片左切换
            $('span.l').on('click',function() {
                clearInterval(timer);
                // 先判断，再运算
                if(showindex<=-1) showindex=3;
                // 让所有li消失，让下标为showindex的li显示
                // $('ul.lb li').stop().fadeOut().eq(showindex).fadeIn();
                showImg();

                // 滑动的小圆点也相应地切换样式；
                // $('ul.cir li').eq(showindex).children('a').addClass('overstyle');
                // $('ul.cir li').eq(showindex).siblings().children('a').removeClass('overstyle');
                showCol();

                showindex--;
                
                TimeOut();
            })

           //当鼠标离开时，继续调用定时器函数，图片继续自动轮播
           // $('span.l').on('mouseout',function() {
           //      TimeOut();
           // })


            // 当点击右按钮时，图片右切换
            $('span.r').on('click',function() {
                clearInterval(timer);
                if(showindex>=4) showindex=0;
                // 让所有li消失，让下标为showindex的li显示
                // $('ul.lb li').stop().fadeOut().eq(showindex).fadeIn();
                showImg();

                // 滑动的小圆点也相应地切换样式；
                // $('ul.cir li').eq(showindex).children('a').addClass('overstyle');
                // $('ul.cir li').eq(showindex).siblings().children('a').removeClass('overstyle');
                showCol();

                showindex++;

                TimeOut();
            })

            //当鼠标离开时，继续调用定时器函数，图片继续自动轮播
           // $('span.r').on('mouseout',function() {
           //      TimeOut();
           // })

        })

        // 实现自动播放：通过计时器函数，每过多长时间，将当前的图片淡出，将下一张图片淡入。如何获取到下一张图片，可以获取到当前图片的数组下标
        function Timer() {//循环函数  定时器
            timer = setInterval(function() {
                showindex++;// 每执行一次计时器，数组下标自增一次
                if(showindex>=4) showindex=0;

                // 显示小圆点样式
                // console.log(showindex);
                // $('ul.cir li').eq(showindex).children('a').addClass('overstyle');
                // $('ul.cir li').eq(showindex).siblings().children('a').removeClass('overstyle');
                showCol();

                // 显示图片切换
                //让所有li消失，下标为showindex的li显示
                // $('ul.lb li').stop().fadeOut().eq(showindex).fadeIn();
                showImg();
            },3000);
        }

        // 延迟执行函数  延时定时器
        function TimeOut() {
            timeout = setTimeout(Timer(), 5000);
        }
        

        function showImg() {
            $('ul.lb li').stop().hide().eq(showindex).fadeIn(1500);//让所有li的图片淡出，并让下标为showindex的li的图片淡入
        }

        function showCol() {
            $('ul.cir li').eq(showindex).children('a').addClass('overstyle');
            $('ul.cir li').eq(showindex).siblings().children('a').removeClass('overstyle');
        }
    </script>
</body>
</html>